
import React from 'react';
import day from 'assets/music/day.mp3';
import night from 'assets/music/night.mp3';
import { observer, inject } from 'mobx-react';

@inject('store')
@observer
export default class Audio extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  play() {
    // console.log(this.refs.audio.paused);
    this.refs.audio.play();
  }

  pause() {

    this.refs.audio.pause();
  }

  componentDidMount() {
    this.play();
  }

  componentDidUpdate() {
    const { musicPlay } = this.props.store;
    // console.log('musicPlay===', musicPlay);
    if (musicPlay) {
      this.play();
    } else {
      this.pause();
    }
  }

  render() {
    console.log('this.props====', this.props.store.musicPlay);
    const { isLight } = this.props.store;
    const props = {
      src: isLight === true || isLight === 'true' ? day : night,
      ref: 'audio',
      loop: true
    };
    return <audio {...props} />;
  }
}
